<template>
    <el-dialog :visible.sync="showDialog" :title="$t('common.modifyWorkInfo')" width="500px" @close="close">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="right" class="normal_label">
            <!--职业类型-->
            <el-form-item :label="$t('common.careerType')" prop="jobType">
                <el-select v-model="form.jobType" style="width: 100%">
                    <el-option v-for="item in profession" :key="item.id" :value="item.name" :label="item.name"></el-option>
                </el-select>
            </el-form-item>
            <!--公司名称-->
            <el-form-item :label="$t('common.corpName')" prop="companyName">
                <el-input v-model="form.companyName" :placeholder="$t('common.corpName')"></el-input>
            </el-form-item>
            <!--公司地址-->
            <el-form-item :label="$t('common.corpAddress')" prop="companyAddress">
                <el-cascader v-model="form.companyAddress" :options="CityData" style="width: 100%"></el-cascader>
            </el-form-item>
            <el-form-item label="" prop="address">
                <el-input v-model="form.address" :placeholder="$t('verify.plsInput')"></el-input>
            </el-form-item>
            <!--当前职位-->
            <el-form-item :label="$t('common.currPosition')" prop="position">
                <el-select v-model="form.position" style="width: 100%">
                    <el-option v-for="(position, $index) in position" :key="$index" :value="position" :label="position"></el-option>
                </el-select>
            </el-form-item>
            <!--公司电话-->
            <el-form-item :label="$t('common.corpPhone')" prop="companyTel">
                <el-input v-model="form.companyTel" :placeholder="$t('common.corpPhone')"></el-input>
            </el-form-item>
            <!--发薪周期-->
            <el-form-item :label="$t('common.payInterval')" prop="payCycle">
                <el-select v-model="form.payCycle" @change="handlePayCycleChange" style="width: 100%">
                    <el-option v-for="(item, $index) in payrollCycle" :key="$index" :value="item" :label="item"></el-option>
                </el-select>
            </el-form-item>
            <!--发薪日-->
            <el-form-item v-if="form.payCycle==='Monthly'||form.payCycle==='Once two weeks'" :label="$t('common.payDay')" prop="payDay">
                <el-select v-model="form.payDay" style="width: 100%">
                    <el-option v-for="day in 31" :key="day" :value="String(day)" :label="day" :disabled="Boolean(form.payDay2&&day>=form.payDay2)"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="form.payCycle==='Once two weeks'" :label="$t('common.payDay')+' 2'" prop="payDay2">
                <el-select v-model="form.payDay2" style="width: 100%">
                    <el-option v-for="day in 31" :key="day" :value="String(day)" :label="day" :disabled="Boolean(form.payDay&&day<=form.payDay)"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="form.payCycle==='Weekly'" :label="$t('common.payDay')" prop="payDay">
                <el-select v-model="form.payDay" style="width: 100%">
                    <el-option v-for="day in paydayWeek" :key="day" :value="String(day)" :label="day"></el-option>
                </el-select>
            </el-form-item>
            <!--月收入-->
            <el-form-item :label="$t('common.monthlyIncome')" prop="salary">
                <el-select v-model="form.salary" style="width: 100%">
                    <el-option v-for="(item, $index) in income" :key="$index" :value="item" :label="item"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="close">{{ $t('common.cancel') }}</el-button>
            <el-button @click="submit" type="primary">{{ $t('common.confirm') }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import CityData from '@/libs/city-data/city-data.json';

export default {
    name: 'work-info',
    props: {
        workInfo: {
            required: true,
            type: Object,
            default() {
                return {};
            },
        },
        visible: {
            required: true,
            type: Boolean,
            default: false,
        },
        userId: {
            required: true,
            type: String,
            default: '',
        },
    },
    data() {
        return {
            showDialog: false,
            form: {
                jobType: '',
                companyName: '',
                district: '',
                province: '',
                city: '',
                address: '',
                position: '',
                companyTel: '',
                payCycle: '',
                payDay: '',
                payDay2: '',
                salary: '',
                companyAddress: [],
            },
            rules: {
                jobType: [
                    { required: true, message: this.$t('verify.plsChoose') }, // 请选择
                ],
                companyName: [
                    { required: true, message: this.$t('verify.plsInput') }, // 请输入
                ],
                address: [
                    { required: true, message: this.$t('verify.plsInput') }, // 请输入
                ],
                position: [
                    { required: true, message: this.$t('verify.plsChoose') }, // 请选择
                ],
                companyTel: [
                    { required: true, message: this.$t('verify.plsInput') }, // 请输入
                    { pattern: /^[0-9]{7,13}$/, message: this.$t('verify.plsInputCorrectNum') }, // 请输入正确的号码
                ],
                payCycle: [
                    { required: true, message: this.$t('verify.plsChoose') }, // 请选择
                ],
                payDay: [
                    { required: true, message: this.$t('verify.plsChoose') }, // 请选择
                ],
                payDay2: [
                    { required: true, message: this.$t('verify.plsChoose') }, // 请选择
                ],
                salary: [
                    { required: true, message: this.$t('verify.plsChoose') }, // 请选择
                ],
                companyAddress: [
                    { required: true, message: this.$t('verify.plsChoose') }, // 请选择
                ],
            },
            // 职业
            profession: [
                { 'id': '1', 'name': 'Officials of Government and Special-Interest Organizations' },
                { 'id': '2', 'name': 'Lawyer' },
                { 'id': '3', 'name': 'Corporate Executives' },
                { 'id': '4', 'name': 'Managers' },
                { 'id': '5', 'name': 'Managing Proprietors and Supervisors' },
                { 'id': '6', 'name': 'Human Resource Worker' },
                { 'id': '7', 'name': 'Driver' },
                { 'id': '8', 'name': 'Tour Guide' },
                { 'id': '9', 'name': 'Teacher' },
                { 'id': '10', 'name': 'Professionals' },
                { 'id': '11', 'name': 'Consultant' },
                { 'id': '12', 'name': 'Researcher' },
                { 'id': '13', 'name': 'Enterprise Administrator' },
                { 'id': '14', 'name': 'Accountant' },
                { 'id': '15', 'name': 'Security Guard' },
                { 'id': '16', 'name': 'Scientist' },
                { 'id': '17', 'name': 'Design / Arts/ Media Practitioner' },
                { 'id': '18', 'name': 'Medical Worker' },
                { 'id': '19', 'name': 'IT Worker' },
                { 'id': '20', 'name': 'Technicians and Associate Professionals' },
                { 'id': '21', 'name': 'Clerk of Customer Service/Call Center/Bank/Financial Institution' },
                { 'id': '22', 'name': 'Service Workers and Shop and Market Sales Workers' },
                { 'id': '23', 'name': 'Transportation Worker' },
                { 'id': '24', 'name': 'Repair and Maintenance Worker' },
                { 'id': '25', 'name': 'Trades and Related Workers' },
                { 'id': '26', 'name': 'Plant and Machine Operators and Assemblers' },
                { 'id': '27', 'name': 'Sales/Marketing/Advertising Staff' },
                { 'id': '28', 'name': 'Laborers and Unskilled Worker' },
                { 'id': '29', 'name': 'Factory Worker' },
                { 'id': '30', 'name': 'Construction Worker' },
                { 'id': '31', 'name': 'Special Occupations' },
                { 'id': '32', 'name': 'Property Broker' },
                { 'id': '33', 'name': 'Freelancer' },
                { 'id': '34', 'name': 'Unemployed ' },
                { 'id': '35', 'name': 'Student' },
                { 'id': '36', 'name': 'Housekeeper' },
                { 'id': '37', 'name': 'Farmers' },
                { 'id': '38', 'name': 'Forestry Workers and Fishermen' },
                { 'id': '39', 'name': 'Self-Employed' }
            ],
            // 职位
            position: [
                // 'Junior Staff',
                // 'Middle-level Manager',
                // 'Senior Manager',
                // 'Boss'
                'Staff',
                'Team Leader',
                'Manager',
                'Senior Manger',
                'Owner',
            ],
            // 发薪周期
            payrollCycle: [
                'Monthly',
                'Once two weeks',
                'Weekly',
                'Daily'
            ],
            // 发薪日
            paydayWeek: [
                'Sunday',
                'Monday',
                'Tuesday',
                'Wednesday',
                'Thursday',
                'Friday',
                'Saturday'
            ],
            // 月收入
            income: [
                '0 - 5000 PHP',
                '5,000.01 - 10,000 PHP',
                '10,100.01 - 13,000 PHP',
                '13,000.01 - 15,000 PHP',
                '15,000.01 - 20,000 PHP',
                '20,000.01 - 50,000 PHP',
                '50,000+ PHP'
            ],
            // 城市数据
            CityData,
        };
    },
    watch: {
        visible(val) {
            if (val) {
                const form = this.form;
                const data = this.workInfo;
                Object.keys(this.form).forEach(key => {
                    form[key] = data[key];
                });
                // 公司地址
                form.companyAddress = [data.district, data.province, data.city];
                if (form.payDay.includes(',')) {
                    // 多个发薪日
                    const arr = form.payDay.split(',');
                    form.payDay = arr[0];
                    form.payDay2 = arr[1];
                }
                this.showDialog = true;
            }
        },
    },
    methods: {
        // 关闭弹框
        close() {
            this.showDialog = false;
            this.$emit('update:visible', false);
            this.$emit('close');
        },
        // 切换发薪周期
        handlePayCycleChange() {
            this.form.payDay = '';
            this.form.payDay2 = '';
            this.$nextTick(() => {
                const form = this.$refs.form;
                form && form.clearValidate(['payDay', 'payDay2']);
            });
        },
        // 提交
        submit() {
            const form = this.$refs.form;
            form.validate(val => {
                if (val) {
                    const { jobType, companyName, address, position, companyTel, payCycle, payDay, payDay2, salary, companyAddress } = this.form;
                    const user = this.$storage.get('user');
                    const { domain, company, appName } = this.workInfo;
                    const params = {
                        userId: this.userId,
                        jobType,
                        companyName,
                        district: companyAddress[0],
                        province: companyAddress[1],
                        city: companyAddress[2],
                        address,
                        position,
                        companyTel,
                        payCycle,
                        payDay,
                        salary,
                        adminUserId: user.id,
                        adminUserName: user.username,
                        domain,
                        company,
                        appName,
                    };
                    if (payCycle === 'Once two weeks') {
                        params.payDay = params.payDay + ',' + payDay2;
                    }
                    this.$api.audit.updateUserJobInfoByAdmin(params).then(res => {
                        const { status } = res;
                        if ('1' === status) {
                            this.$message.success(this.$t('common.successfulOperation'));
                            // window.location.reload();
                            this.$emit('updateData', 'work-info');
                            this.close();
                        }
                    });
                }
            });
        },
    },
    created() {
        if (this.visible) {
            this.showDialog = true;
        }
    }
}
</script>

<style scoped>

</style>
